<template>

  <div>
    <h1>App</h1>
    <!-- username: {{ username }} -->
    <!-- <BsInput :modelValue="username" @update:modelValue="username = $event"></BsInput> -->
    <!-- <BsInput v-model="username"></BsInput> -->

    <!-- {{ user }}
    <BsUser v-model.capitalize="user.username" v-model:phone="user.phone"
      v-model:email="user.email"></BsUser> -->

    {{ num }}
    <BsPagination :total="10" :pageSize="3" v-model="num">
    </BsPagination>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import BsPagination from './components/BsPagination.vue';
import BsInput from './components/BsInput.vue';
import BsUser from './components/BsUser.vue';
const username = ref('jack');
const num = ref(2)
const user = ref({
  username: 'lucy',
  phone: '17283876555',
  email: 'jack@11.com'
});

</script>


<style>
div {
  border: solid;
  padding: 20px
}
</style>